<template>
  <div class="page-box h100 videowe-page" id="videowePage">
      <div class="kjnmxeer">
          <i class="iconfont dx-left fz30 z3 b" @click="hfs"></i>

        </div>

      <div  class="dfdst44">
 <iframe :src="ifr" allowfullscreen ></iframe>
      </div>
     <p class="n-card-header__main mt20">
猜你喜欢
     </p>
     <div class="videowe-box">
      <div
        class="video-box sz"
        v-for="(item, idx) in dataList"
        :key="idx"
        @click="kmnser(item.id)"
      >
        <img class="img-box" :src="item.fm" />
        <p class="fz16 nowrap dsfdtt">
          {{ item.title }}
        </p>
      </div>
    </div>
  </div>
</template>
 <script lang='ts' setup>
 import { qurl,dxget,hf } from "../../util/index";
 import { h, ref, reactive } from "vue";
 let qr = qurl()
 let htmlse =  qr.id
 let ifr = ref()
 let dataList = ref()
 const hfs = ()=>{
     hf('videoqita')
 }
const getData = async ()=>{
   let {data}:any = await dxget("pacong/videoConter",{id:htmlse})
   ifr.value = data.videoSrc
   dataList.value = data.co_content8
   document.getElementById("videowePage").scrollTo(0,0);
}
const kmnser = (id)=>{
    htmlse = id
    getData()
}
getData()
</script>

 <style scoped>
 .jhjnseet{
     overflow: auto;
     height: 100%;
 }
    .dfdst44{
      
        width: 800px;
        height: 400px;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
        
    }
    .dfdst44 iframe{
          border: 0;
        width: 102%;
        height: 100%;
    }

    .img-box {
  width: 100%;
  height: 300px;
  border-radius: 4px;
  overflow: hidden;
  background: #f8f8f8;
}
.video-box {
}
.dsfdtt {
  max-width: 170px;
  overflow: hidden;
}
.videowe-box {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
.kjnmxeer{
    display: none;
}
</style>